<template>
  <div class="page">
    <div class="x_flex">
      <div>
        <h2>布局列表</h2>
        <div v-for="(item, idx) in keymaps" :key="idx">
          {{ item.split(".")[0] }}
        </div>
      </div>
      <div class="x_grow">
        <v-container>
          <v-form ref="form">
            <v-row>
              <v-col cols="12" md="4">
                <v-slider
                  v-model="formData.x"
                  :label="'X:' + formData.x"
                  max="10"
                  min="1"
                ></v-slider>
              </v-col>
              <v-col cols="12" md="4">
                <v-slider
                  v-model="formData.y"
                  :label="'Y:' + formData.y"
                  max="10"
                  min="1"
                ></v-slider>
              </v-col>
            </v-row>
          </v-form>
        </v-container>
        <div class="pv_box">
          <template v-for="(y, yidx) in formData.y">
            <div :key="yidx + 'row'" class="pv_row">
              <div
                v-for="(x, xidx) in formData.x"
                class="pv_box_item"
                :key="yidx + '_' + xidx"
                @click="setKey(x - 1, y - 1)"
              >
                {{ getKey(x - 1, y - 1).name }}
              </div>
            </div>
          </template>
        </div>
        <div>
          <v-btn @click="saveTap">SAVE</v-btn>
        </div>
        <!-- <vue-qrcode :value="qrCode" /> -->
        <vue-qr :text="qrCode" :size="200"></vue-qr>
        <a :href="qrCode">{{qrCode}}</a>
      </div>
    </div>
    <set-key-dlg ref="dlg" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import axios from "axios";
import { getApi } from "@/utils/Apibase";
import setKeyDlg from "./parts/setKeyDlg.vue";
import vueQr from "vue-qr";
@Component({
  components: { setKeyDlg, vueQr },
})
export default class Home extends Vue {
  formData: any = { x: 1, y: 1 };
  keymaps: any = [];
  keymapIdx = 0;
  async created() {
    let data = await axios.get(getApi("getKeyMaps"), {});
    if (data.data) {
      this.keymaps = data.data;
      let name = this.keymaps[this.keymapIdx] || "";
      if (name) {
        let req = await axios.get(getApi("getKeyMapData"), {
          params: { name },
        });
        if (req.data) {
          this.formData = req.data;
          this.creatQrCode();
        }
      }
    }
  }
  qrCode = "";
  creatQrCode() {
    let name = this.keymaps[this.keymapIdx];
    this.qrCode = location.origin + "/#/ctrl?name=" + name;
  }
  getKey(x: any, y: any) {
    let data = this.formData.data;
    let key = `${x},${y}`;
    if (data[key]) {
      return data[key];
    } else {
      return {};
    }
  }
  setKey(x: any, y: any) {
    let data = this.getKey(x, y);
    let dlg: any = this.$refs.dlg;
    dlg.show({
      mode: "edit",
      data,
      success: (val: any) => {
        let key = `${x},${y}`;
        this.formData.data[key] = val;
        this.$forceUpdate();
      },
    });
  }
  async saveTap() {
    let name = this.keymaps[this.keymapIdx];
    let data = this.formData;
    console.log(name);
    let req: any = await axios.post(getApi("setKeyMapData"), { name, data });
    if (req.data.success) {
      alert("save success");
    }
  }
}
</script>
<style lang="scss" scope="this api replaced by slot-scope in 2.5.0+">
.pv_box {
  .pv_row {
    display: flex;
    .pv_box_item {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid #000;
    }
  }
}
.d-flex {
  display: flex;
}
</style>